<template>
  <div class="about">
    <Head @sendValue="receive"></Head>
    <List :listInfo="listInfo"></List>
    <Foot :endNum="endNum" :total="listInfo.todo.length" v-if="listInfo.todo.length"
          :delEnd="delEnd"
          :isCheckAll="isCheckAll"
    ></Foot>
    11111
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, computed } from "vue";

// 定义规范数据的接口
interface E {
  complete: boolean;
  event: string
}

import Head from "./about/head.vue";
import List from "./about/list.vue";
import Foot from "./about/foot.vue";

export default defineComponent({
  name: "",
  components: {
    Head,
    List,
    Foot,
  },
  setup() {

    // listInfo 是个对象所以定义泛型时 传入对象

    let listInfo = reactive<{ todo: E[] }>({
      todo:[
        {complete: true, event: "兰博基尼"},
        {complete: true, event: "买房子"},
        {complete: true, event: "买车"},
      ]
    });
    // 计算未完成的数量
    const endNum = computed(() => {
      return listInfo.todo.reduce((pre, item, i) => {
        return pre + (item.complete ? 1 : 0);
      }, 0);
    });
    // 接受头部传来的新增加的事件
    const receive = (value:E) => {
      listInfo.todo.unshift(value);
    };
    // 清除掉已完成的事件
    const delEnd = () => {
      listInfo.todo = listInfo.todo.filter((item) => {
        return !item.complete
      })
    }
    // 全选或者全不选
    const isCheckAll = (isCompleted :any) =>{
      listInfo.todo.forEach((item) => {
        item.complete = isCompleted
      })
    }
    return {
      listInfo,
      receive,
      endNum,
      delEnd,
      isCheckAll
    };
  },
});
</script>
<style scoped>
.about {
  width: 300px;
  margin: 0 auto;
}
</style>

